<template>
	<view class="content pb-safe">
		<u-navbar
			title="收支记录"
			@rightClick="rightClick"
			rightText="收款账户"
			placeholder
			:autoBack="true"
		>
		</u-navbar>
		
		<view class="bg-primary headbox c-fff pt-20">
			<view class="flex-between-center mb-16">
				<view class="pl-20 fs-28">
					<view>你好！{{userInfo.username}}</view>
					<view>可提现余额</view>
				</view>
				<view class="bg-fff px-30 py-10 tixianbtn color-primary" @click="goPath('/pages/shop/withdrawal')" v-if="userInfo.withdrawal_switch ==='1'">
					<view>申请提现</view>
					<text class="sinconfont"></text>
				</view>
			</view>
			<view class="p-20">
				<view class="fs-68">{{userInfo.money}}</view>
				<view class="flex-around-center text-center bg-fff-1 fs-28 rd-8 p-20 py-40 my-20 opacity-90">
					<view class="w-100vw">
						<view>已提现</view>
						<view class="fs-48">{{userInfo.withdraw_money}}</view>
					</view>
					
					<view class="w-100vw">
						<view>提现中</view>
						<view class="fs-48">{{userInfo.withdraw_audit}}</view>
					</view>
				</view>
			</view>
			
		</view>
		
		<!-- 公告 -->
		<!-- <view class="flex-y-center bg-info-1">
			<u-notice-bar text="公告内容公告内容公告内容公告内容" bgColor="none" color="#005FD2"></u-notice-bar>
		</view> -->
		
		<view class="p-20">
			<!-- <view class="pb-10 flex-between-center fs-30 mb-20 c-666">
				<view class="c-333 line-bottom p-10">收入明细</view>
				<view class="p-10">支出明细</view>
				<view class="p-10">提现记录</view>
			</view> -->
			
			<!-- 选项卡 -->
			<view class="pb-10 flex-between-center fs-30 mb-20 c-666">
				<view 
					:class="['p-10', activeTab === 0 ? 'active-tab' : '']" 
					@click="switchTab(0)"
				>
					收入明细
				</view>
				<view 
					:class="['p-10', activeTab === 1 ? 'active-tab' : '']" 
					@click="switchTab(1)"
				>
					支出明细
				</view>
				<view 
					:class="['p-10', activeTab === 2 ? 'active-tab' : '']" 
					@click="switchTab(2)"
				>
					提现记录
				</view>
			</view>
			
			
			<!-- <view class="flex-between-center px-10">
				<view class="c-666">共计196条</view>
				<view class="flex">
					<view class="px-20">昨天</view>
					<view class="px-20">今天</view>
					<view class="px-20">近7天</view>
					<view class="px-20">筛选</view>
				</view>
			</view> -->
			<!-- 时间筛选 -->
			<view class="flex-between-center px-10">
				<view class="c-666">共计{{total}}条</view>
				<view class="flex">
					<view 
						:class="['px-20', activeTime === 1 ? 'active-time' : '']" 
						@click="switchTime(1)"
					>
						昨天
					</view>
					<view 
						:class="['px-20', activeTime === 2 ? 'active-time' : '']" 
						@click="switchTime(2)"
					>
						今天
					</view>
					<view 
						:class="['px-20', activeTime === 3 ? 'active-time' : '']" 
						@click="switchTime(3)"
					>
						近7天
					</view>
					<view 
						class="px-20" 
						@click="showTimePicker = true"
					>
						筛选
					</view>
				</view>
			</view>
		</view>
		
		<!-- 列表 -->
		<view class="p-20">
			
			
			<view class="shadow-s rd-20 bg-info-1 p-20 mb-20" v-for="(item,index) in list" :key="index" v-if="total > 0">
				<view class="fs-30 p-20 u-border-bottom mb-20">{{item.memo}}</view>
				
				<view class="u-border-bottom pb-20 fs-26" v-if="item.type == 1 || item.type == 2 || item.type == 3 || item.type == 5 || item.type == 7 || item.type == 8 || item.type == 10">
					<view class="flex-between-center">
						<view class="flex my-10">
							<view class="c-999 w-120">订单号</view>
							<view class="c-666">{{item.ext_text.order_num}}</view>
						</view>
						<view @click="copyBtn(item.ext_text.order_num)">复制</view>
					</view>
					<view class="flex-between-center">
						<view class="flex my-10">
							<view class="c-999 w-120">收货人</view>
							<view class="c-666">{{item.ext_text.shipping_contact}}</view>
						</view>
						<view @click="copyBtn(item.ext_text.shipping_contact)">复制</view>
					</view>
					<view class="flex-between-center" v-if="item.ext_text.phone">
						<view class="flex my-10">
							<view class="c-999 w-120">选购号码</view>
							<view class="c-666">{{item.ext_text.phone}}</view>
						</view>
						<view @click="copyBtn(item.ext_text.phone)">复制</view>
					</view>
				
					<view class="flex-between-center">
						<view class="flex my-10">
							<view class="c-999 w-120">结算时间</view>
							<view class="c-666">{{item.ext_text.jiesuan_time}}</view>
						</view>
					</view>
					
					<view class="flex-between-center">
						<view class="flex py-10">
							<view class="c-999 w-120">备注</view>
							<view>
								<u-parse :content="item.ext_text.jiesuan_msg"></u-parse>
							</view>
						</view>
					</view>
					
				</view>
				
				<view class="u-border-bottom pb-20 fs-26" v-if="item.type == 9">
					<view class="flex-between-center">
						<view class="flex my-10">
							<view class="c-999 w-120">解冻金额</view>
							<view class="c-666">{{item.ext_text.money}}</view>
						</view>
					</view>
					<view class="flex-between-center">
						<view class="flex my-10">
							<view class="c-999 w-120">解冻时间</view>
							<view class="c-666">{{item.ext_text.jiedong_time}}</view>
						</view>
					</view>
					
					<view class="flex-between-center">
						<view class="flex my-10">
							<view class="c-999 w-120">解冻原因</view>
							<view class="c-666">{{item.ext_text.jiedong_reason}}</view>
						</view>
					</view>
					
				</view>
				
				<view class="u-border-bottom pb-20 fs-26" v-if="item.type == 11">
					<view class="flex-between-center">
						<view class="flex my-10">
							<view class="c-999 w-120">驳单号</view>
							<view class="c-666">{{item.ext_text.withdraw_sn}}</view>
						</view>
						<view @click="copyBtn(item.ext_text.withdraw_sn)">复制</view>
					</view>
					<view class="flex-between-center">
						<view class="flex my-10">
							<view class="c-999 w-120">驳回金额</view>
							<view class="c-666">{{item.ext_text.money}}</view>
						</view>
					</view>
					<view class="flex-between-center">
						<view class="flex my-10">
							<view class="c-999 w-120">驳回时间</view>
							<view class="c-666">{{item.ext_text.withdraw_time}}</view>
						</view>
					</view>
					
					<view class="flex-between-center">
						<view class="flex my-10">
							<view class="c-999 w-120">驳回原因</view>
							<view class="c-666">{{item.ext_text.withdraw_reason}}</view>
						</view>
					</view>
					
				</view>
				
				<view class="u-border-bottom pb-20 fs-26" v-if="item.type == 12 || item.type == 15">
					<view class="flex-between-center">
						<view class="flex my-10">
							<view class="c-999 w-120">流水号</view>
							<view class="c-666">{{item.ext_text.serial_no}}</view>
						</view>
						<view @click="copyBtn(item.ext_text.serial_no)">复制</view>
					</view>
					<view class="flex-between-center">
						<view class="flex my-10">
							<view class="c-999 w-120">变更金额</view>
							<view class="c-666">{{item.ext_text.money}}</view>
						</view>
					</view>
					<view class="flex-between-center">
						<view class="flex my-10">
							<view class="c-999 w-120">操作时间</view>
							<view class="c-666">{{item.ext_text.addtime}}</view>
						</view>
					</view>
					
					<view class="flex-between-center">
						<view class="flex my-10">
							<view class="c-999 w-120">说明</view>
							<view class="c-666">{{item.ext_text.reason}}</view>
						</view>
					</view>
					
				</view>
				
				<view class="u-border-bottom pb-20 fs-26" v-if="item.type == 13">
					<view class="flex-between-center">
						<view class="flex my-10">
							<view class="c-999 w-120">冻结原因</view>
							<view class="c-666">{{item.ext_text.dibghue_msg}}</view>
						</view>
					</view>
					<view class="flex-between-center">
						<view class="flex my-10">
							<view class="c-999 w-120">冻结时间</view>
							<view class="c-666">{{item.ext_text.dongjie_time}}</view>
						</view>
					</view>
					
					<view class="flex-between-center">
						<view class="flex my-10">
							<view class="c-999 w-120">冻结金额</view>
							<view class="c-666">{{item.ext_text.dongjie_money}}</view>
						</view>
					</view>
					
				</view>
				
				<view class="u-border-bottom pb-20 fs-26" v-if="item.type == 14">
					<view class="flex-between-center">
						<view class="flex my-10">
							<view class="c-999 w-120">订单编号</view>
							<view class="c-666">{{item.ext_text.order_num}}</view>
						</view>
						<view @click="copyBtn(item.ext_text.order_num)">复制</view>
					</view>
					<view class="flex-between-center">
						<view class="flex my-10">
							<view class="c-999 w-120">收货人</view>
							<view class="c-666">{{item.ext_text.shipping_contact}}</view>
						</view>
						<view @click="copyBtn(item.ext_text.shipping_contact)">复制</view>
					</view>
					
					<view class="flex-between-center" v-if="item.ext_text.phone">
						<view class="flex my-10">
							<view class="c-999 w-120">选购号码</view>
							<view class="c-666">{{item.ext_text.phone}}</view>
						</view>
						<view @click="copyBtn(item.ext_text.phone)">复制</view>
					</view>
					<view class="flex-between-center">
						<view class="flex my-10">
							<view class="c-999 w-120">追回时间</view>
							<view class="c-666">{{item.ext_text.addtime}}</view>
						</view>
					</view>
					
					<view class="flex-between-center">
						<view class="flex my-10">
							<view class="c-999 w-120">追回金额</view>
							<view class="c-666">{{item.ext_text.money}}</view>
						</view>
					</view>
					
				</view>
				
				<view class="u-border-bottom pb-20 fs-26" v-if="item.type == 16">
					<view class="flex-between-center">
						<view class="flex my-10">
							<view class="c-999 w-120">提现单号</view>
							<view class="c-666">{{item.ext_text.withdraw_sn}}</view>
						</view>
						<view @click="copyBtn(item.ext_text.withdraw_sn)">复制</view>
					</view>
					<view class="flex-between-center">
						<view class="flex my-10">
							<view class="c-999 w-120">提现金额</view>
							<view class="c-666">{{item.ext_text.money}}</view>
						</view>
					</view>
					<view class="flex-between-center">
						<view class="flex my-10">
							<view class="c-999 w-120">需扣税</view>
							<view class="c-666">{{item.ext_text.tax_money}}</view>
						</view>
					</view>
					<view class="flex-between-center">
						<view class="flex my-10">
							<view class="c-999 w-120">到账金额</view>
							<view class="c-666">{{item.ext_text.paid_money}}</view>
						</view>
					</view>
					<view class="flex-between-center">
						<view class="flex my-10">
							<view class="c-999 w-120">状态</view>
							<view class="c-666">{{item.ext_text.withdraw_msg}}</view>
						</view>
					</view>
					
				</view>
				
				<view class="flex-around-center pt-20 fs-28 fw-600">
					<view class="">变动金额<span class="color-primary pl-10 fs-32">{{activeTab == 0?'+':'-'}}¥{{item.money_text}}</span></view>
					<view class="c-999">变动后余额<span class="color-warning pl-10 fs-32">¥{{item.after}}</span></view>
				</view>
			</view>
		</view>
		
		<!-- 时间选择器 -->
				<u-datetime-picker
					:show="showTimePicker"
					v-model="customTime"
					mode="date"
					:minDate="minDate"
					:maxDate="maxDate"
					@confirm="confirmTime"
					@cancel="showTimePicker = false"
				></u-datetime-picker>
		
		
		
		<view class="h-100"></view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// list:[
				// 	{
				// 		title:'订单结算--自营订单或代理张三订单',
				// 		orderNo:'2025283719281112',
				// 		name:'张三',
				// 		phone:'15896668989',
				// 		jstime:'2025-12-01',
				// 		reson:'<p style="color:red;">未签约</p>',
				// 		changemoney:'274',
				// 		changedmoney:'520'
				// 	},
				// 	{
				// 		title:'订单结算--自营订单或代理李四订单',
				// 		orderNo:'2025283719288888',
				// 		name:'张三',
				// 		phone:'13888856588',
				// 		jstime:'2025-12-01',
				// 		reson:'<p style="color:red;">未签约</p>',
				// 		changemoney:'220',
				// 		changedmoney:'486'
				// 	},
				// ],
				userInfo:{
					username:'',
					money:'',
					withdraw_money:'',
					withdraw_audit:'',
				},
				// 列表数据
				list: [],
				// 当前激活的选项卡：0-收入明细 1-支出明细 2-提现记录
				activeTab: 0,
				// 当前激活的时间筛选：1-昨天 2-今天 3-近7天 4-自定义
				activeTime: 2,
				// 总条数
				total: 0,
				// 分页参数
				page: 1,
				pageSize: 10,
				hasMore: true,
				// 时间选择器
				showTimePicker: false,
				customTime: Number(new Date()),
				minDate: Number(new Date(2020, 0, 1)),
				maxDate: Number(new Date()),
				// 自定义时间范围
				customStartTime: '',
				customEndTime: ''
			};
		},
		onLoad() {
			this.withdrawInfo();
			this.getList();
		},
		onReachBottom() {
					if (this.hasMore) {
						this.page++;
						this.getList(true);
					}
				},
		onPullDownRefresh() {
			this.page = 1;
			this.hasMore = true;
			this.getList().then(() => {
				uni.stopPullDownRefresh();
			});
		},
		methods:{
			goPath(url) {
				uni.navigateTo({
					url: url
				})
			},
			// 切换选项卡
			switchTab(tab) {
				if (this.activeTab === tab) return;
				
				this.activeTab = tab;
				this.page = 1;
				this.hasMore = true;
				this.list = [];
				this.getList();
			},
			// 切换时间筛选
			switchTime(timeType) {
				if (this.activeTime === timeType) return;
				
				this.activeTime = timeType;
				this.customStartTime = '';
				this.customEndTime = '';
				this.page = 1;
				this.hasMore = true;
				this.list = [];
				this.getList();
			},
			// 确认自定义时间选择
			confirmTime(e) {
				this.showTimePicker = false;
				this.activeTime = 4; // 自定义时间
				this.customStartTime = this.formatDate(e.value);
				this.customEndTime = this.formatDate(new Date());
				this.page = 1;
				this.hasMore = true;
				this.list = [];
				this.getList();
			},
			// 格式化日期
			formatDate(date) {
				const d = new Date(date);
				const year = d.getFullYear();
				const month = String(d.getMonth() + 1).padStart(2, '0');
				const day = String(d.getDate()).padStart(2, '0');
				return `${year}-${month}-${day}`;
			},
			
			// 获取列表数据
			async getList(isLoadMore = false) {
				try {
					// 构建请求参数
					const params = {
						current: this.activeTab, // 1-收入 2-支出 3-提现
						page: this.page,
						limit: this.pageSize
					};
					
					// 添加时间筛选参数
					switch (this.activeTime) {
						case 1: // 昨天
							params.time_type = 'yesterday';
							break;
						case 2: // 今天
							params.time_type = 'today';
							break;
						case 3: // 近7天
							params.time_type = 'last7days';
							break;
						case 4: // 自定义时间
							if (this.customStartTime && this.customEndTime) {
								params.sta_time = this.customStartTime;
								params.end_time = this.customEndTime;
							}
							break;
					}
					
					// 调用接口
					const res = await this.$httpApi.getUserMoneyList(params);
					
					if (res.code === 1) {
						const newList = res.data.list || [];
						
						if (isLoadMore) {
							this.list = [...this.list, ...newList.data];
						} else {
							this.list = newList.data;
						}
						
						this.total = res.data.list.total || 0;
						this.hasMore = newList.length >= this.pageSize;
					} else {
						uni.showToast({
							title: res.msg || '获取数据失败',
							icon: 'none'
						});
					}
				} catch (error) {
					console.error('获取列表失败:', error);
					uni.showToast({
						title: '网络错误，请重试',
						icon: 'none'
					});
				}
			},
			
			withdrawInfo(){
				this.$httpApi.withdrawInfo().then((res) => {
					if (res.code == 1) {
						this.userInfo = res.data
					}
				})
			},
			copyBtn(txt) {
				uni.setClipboardData({
					data: txt,
					success: function() {
						console.log('success');
					}
				});
			},
		}
	}
</script>

<style lang="less">
	.headbox{
		background: linear-gradient(to right, #2E9AFF, #5778F5); ;
	}
	.tixianbtn{
		border-radius: 50px 0 0 50px;
	}
	// 激活状态的选项卡样式
		.active-tab {
			color: #333;
			font-weight: 600;
			border-bottom: 3px solid #5778F5;
		}
		
		// 激活状态的时间筛选样式
		.active-time {
			color: #5778F5;
			font-weight: 600;
			background-color: #f0f7ff;
			border-radius: 20px;
		}
</style>
